<%--
  Created by IntelliJ IDEA.
  User: 13468
  Date: 2020/5/28
  Time: 11:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>精品拼团</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/groupbuy.css"/>
    <script src="<%=request.getContextPath()%>/plugins/jquery/jquery-3.4.1.js"></script>
    <script src="<%=request.getContextPath()%>/plugins/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>


<jsp:include page="header.jsp"></jsp:include>

<div class="container-fluid" style="margin-top: 5px">
    <div class="row">
        <img src="<%=request.getContextPath()%>/images/拼团大图.jpg" alt="图片加载失败">
    </div>
</div>




<div id="mygroup">
    <input type="button" class="btn btn-lg btn-primary" value="我的团购" style="float: right;margin-top: 10px" data-toggle="modal" data-id = "${user.id}" data-target="#myModal3">
</div>

<div class="container-fluid" style="background-color: #F0F0F0">


    <div class="container" style="margin-top: 30px">
        <!-- 搜索框 -->
        <div class="row">
            <div class="col-md-3">
                <div class="log">
<%--                    <img src="<%=request.getContextPath()%>/images/360kad.jpg" alt="图片加载失败"/>--%>
                </div>
            </div>
            <div class="col-md-6" style="padding: 0;margin-top: 15px;text-align: center">
                <form class="bs-example bs-example-form" role="form">
                    <div class="input-group">
                        <input type="text" class="form-control" id="searchgoodname" placeholder="请输入商品名称">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" onclick="searchByGoodName()">搜索</button>
                        </span>
                    </div>
                </form>
            </div>
        </div>
    </div>



    <div class="container" style="margin-top: 50px">
        <div class="row">
            <ul class="goodshow" id="groupshow">


                <c:forEach var="groupGood" items="${groupGoodsVOList}">
                    <li class="col-md-6">
                        <div class="good">
                            <div class="goodimg">
                                <a href="">
                                    <img src="<%=request.getContextPath()%>/${groupGood.goodImages}" alt="图片加载失败">
                                </a>
                            </div>
                            <div class="goodinfo">
                                <p class="goodname">${groupGood.goodName}</p>
                                <p class="gooddetail">${groupGood.goodDetail}</p>
                                <p class="groupgoodprice">￥${groupGood.groupPrice}</p>
                                <p class="goodprice">￥${groupGood.goodPrice}</p>
                                <input type="button" class="btn-lg group" value="拼团" data-toggle="modal" data-id="${groupGood.id}" data-target="#myModal">
                                <p>
                                <p class="icon"><img src="../images/拼团icon.png" alt=""><span>${groupGood.scale}人团</span></p>
                                <p class="sale">已拼团成功${groupGood.groupNumber}</p>
                                </p>
                            </div>
                        </div>
                    </li>
                </c:forEach>


            </ul>
        </div>

        <div class="row" style="height: 200px"></div>
    </div>

</div>



<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top: 60px">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">拼单详情</h4>
            </div>
            <div class="modal-body">
                <p style="font-size: large">正在拼单中</p>
                <div class="groupsmember" style="height: 150px;overflow: auto">
                    <table class="table" id="tab1">
                        <!--                        <caption>正在拼单中</caption>-->
                        <tbody id="grouplist">

                        </tbody>
                    </table>
                </div>

                <div class="groupsponsor" style="margin-top: 20px">
                    <p style="font-size: large">发起拼单</p>
                    <table class="table" id="tab2">
                        <tbody>
                        <tr>
                            <td>
                                <input type="button" class="btn btn-danger" value="发起拼单" onclick="groupSponsor(${user.id})">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                <!--                <button type="button" class="btn btn-primary">提交更改</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>



<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true" style="margin-top: 120px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel2">加入拼单</h4>
            </div>
            <div class="modal-body">

                <div class="groupdetail" style="text-align: center">
                    <p>参与<b id="name">admin</b>的拼单</p>
                    <p>仅剩<span id="counts" style="color: red"></span>个名额，<span id="seconds"></span>后结束</p>
                    <div id="groupmemberavatarurl" style="display: inline-block;margin: 0 auto">
<%--                        参团者头像--%>
                    </div>
                    <div id="groupmembername">
<%--                        参团者name--%>
                    </div>
                    <p>
                        <input type="button" class="btn btn-danger btn-lg" value="参与拼单" onclick="joinGroup(${user.id})">
                    </p>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
<%--                <button type="button" class="btn btn-primary">提交更改</button>--%>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true" style="margin-top: 60px">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
                </button>
                <h4 class="modal-title" id="myModalLabel3">我的团购</h4>
            </div>
            <div class="modal-body">
                <div>
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#groupsuccess" data-toggle="tab">拼团成功</a>
                        </li>
                        <li>
                            <a href="#grouping" data-toggle="tab" onclick="showgrouping(${user.id},1)">正在拼团中</a>
                        </li>
                        <li>
                            <a href="#groupfail" data-toggle="tab" onclick="showgroupfail(${user.id},-1)">拼团失败</a>
                        </li>
                    </ul>
                    <div id="myTabContent" class="tab-content" style="height: 300px;overflow: auto">
                        <div class="tab-pane fade in active" id="groupsuccess">
                            <table class="table" id="groupmembertable2">
                                <tbody id="mygroupinfo2">

                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="grouping">
                            <table class="table" id="groupmembertable1">
                                <tbody id="mygroupinfo1">

                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="groupfail">
                            <table class="table" id="groupmembertable-1">
                                <tbody id="mygroupinfo-1">

                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                <!--                <button type="button" class="btn btn-primary">提交更改</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->



<script>
    function searchByGoodName() {
        var searchgoodname = $('#searchgoodname').val()
        $.ajax({
            url:"/pharmacy/groupbuy/searchByGroupGoodName",
            data:"groupGoodName=" + searchgoodname,
            type:"post",
            dataType:"json",
            success:function (data) {
                if (data.result != ''){
                    var html = ''
                    for (var i = 0; i < data.result.length; i++) {
                        html = html + '<li class="col-md-6">'
                        html = html + '<div class="good">'
                        html = html + '<div class="goodimg">'
                        html = html + '<a href="">'
                        html = html + '<img src="<%=request.getContextPath()%>/' + data.result[i].goodImages + '" alt="图片加载失败">'
                        html = html + '</a>'
                        html = html + '</div>'
                        html = html + '<div class="goodinfo">'
                        html = html + '<p class="goodname">' + data.result[i].goodName + '</p>'
                        html = html + '<p class="gooddetail">' + data.result[i].goodDetail + '</p>'
                        html = html + '<p class="groupgoodprice">￥' + data.result[i].groupPrice + '</p>'
                        html = html + '<p class="goodprice">￥' + data.result[i].goodPrice + '</p>'
                        html = html + '<input type="button" class="btn-lg group" value="拼团" data-toggle="modal" data-id="' + data.result[i].id + '" data-target="#myModal">'
                        html = html + '<p>'
                        html = html + '<p class="icon"><img src="../images/拼团icon.png" alt=""><span>' + data.result[i].scale + '人团</span></p>'
                        html = html + '<p class="sale">已拼团成功' + data.result[i].groupNumber + '</p>'
                        html = html + '</p>'
                        html = html + '</div>'
                        html = html + '</div>'
                        html = html + '</li>'
                    }
                    $('#groupshow').html(html)
                } else {
                    $('#groupshow').html('<div style="text-align: center"><h2>抱歉,未找到相关商品,请重新搜索</h2></div>')
                }

            }

        })
    }
</script>


<script>
    $('#myModal3').on('show.bs.modal',function (event) {

        if(${sessionScope.user == null} ) {
            alert("请先登录")
            window.location.href = "/pharmacy/index/login"
        }

        //btn 触发元素，按钮
        var btn = $(event.relatedTarget)
        var userId = btn.data("id")
        showgroup(userId,2)

    })
</script>

<script>
    function showgrouping(userId,status) {
        //$('#mygroupinginfo').html("正在拼团中,userId=" + userId + "status=" + status)
        showgroup(userId,status)
    }
</script>

<script>
    function showgroupfail(userId,status) {
        //$('#mygroupfailinfo').html("拼团失败,userId=" + userId + "status=" + status)
        showgroup(userId,status)
    }
</script>

<script>
    function showgroup(userId,status) {
        $.ajax({
            url:"/pharmacy/groupsponsor/selectmygroupinfo",
            data:"userId=" + userId + "&status=" + status,
            type:"post",
            dataType:"json",
            success:function (data) {
                var mygroupinfoid = '#mygroupinfo' + status
                console.log(data)
                var html = ''
                if (data.result != ''){
                    for (var i = 0; i < data.result.length; i++) {
                        html = html + '<tr>'
                        html = html + '<td style="text-align: center;display:table-cell; vertical-align:middle">'
                        html = html + (i+1)
                        html = html + '</td>'
                        html = html + '<td style="text-align: center;display:table-cell; vertical-align:middle">'
                        html = html + '<img src="<%=request.getContextPath()%>/' + data.result[i].goodImages + '" alt="图片加载失败" style="width: 60px;height: 60px">'
                        html = html + '<div>' + data.result[i].goodName + '</div>'
                        html = html + '</td>'
                        html = html + '<td style="text-align: center;display:table-cell; vertical-align:middle">'
                        html = html + showGroupMember(i,data.result[i].groupSponsorId,data.result[i].joinNum,data.result[i].scale,status)
                        html = html + '</div>'
                        html = html + '</td>'
                        html = html + '<td style="text-align: center;display:table-cell; vertical-align:middle">'
                        if (status == 2){
                            <%--html = html + '<input type="button" class="btn btn-danger" value="拼团成功，去提交订单" onclick="pay(${user.id},' + data.result[i].groupGoodId + ',' + data.result[i].groupSponsorId + ',' + data.result[i].groupPrice + ',' + '&quot;' + data.result[i].goodName + '&quot;' + ')">'--%>
                            html = html + '<input type="button" class="btn btn-danger" value="拼团成功，去提交订单" onclick="createOrder(' + data.result[i].groupGoodId + ')">'
                        } else if (status == -1){
                            html = html + '<input type="button" class="btn btn-danger" value="拼团已失效" disabled>'
                        } else if (status == 1){
                            html = html + '<input type="button" class="btn btn-danger" value="正在进行中">'
                        }

                        html = html + '</td>'
                        html = html + '</tr>'
                    }

                    $(mygroupinfoid).html(html)

                } else {
                    if (status == 2){
                        html = '<tr><td style="text-align: center;display:table-cell; vertical-align:middle;font-size: large">当前暂无成功拼团</td></tr>'
                    } else if (status == -1){
                        html = '<tr><td style="text-align: center;display:table-cell; vertical-align:middle;font-size: large">当前暂无已失效拼团</td></tr>'
                    } else if (status ==1){
                        html = '<tr><td style="text-align: center;display:table-cell; vertical-align:middle;font-size: large">当前暂无正在进行中拼团</td></tr>'
                    }

                    $(mygroupinfoid).html(html)
                }
            }

        })
    }
</script>


<script>
    function createOrder(goodId) {
        window.location.href = "/pharmacy/order/detail?goodId=" + goodId + "&number=1"
    }
</script>

<script>
    function pay(userId,groupGoodId,groupSponsorId,groupPrice,goodName) {
        window.location.href = "/pharmacy/alipay/pay?userId=" + userId + "&goodId=" + groupGoodId + "&price=" + groupPrice + "&goodName=" + goodName
    }
</script>

<script>
    function showGroupMember(index,groupSponsorId,joinNum,scale,status) {
        var html = ''
        $.ajax({
            url:"/pharmacy/groupmember/selectgroupmember",
            data:"groupSponsorId=" + groupSponsorId,
            type:"post",
            dataType:"json",
            success:function (data) {
                console.log(data)
                if (data.result != ''){
                    html = html + '<div style="display: inline-block;position: relative">'
                    html = html + '<div class="pinzhu">拼主</div>'
                    for (var i = 0; i < data.result.length; i++) {
                        console.log('1,'+i)
                        html = html + '<div class="groupimg">'
                        html = html + '<img src="<%=request.getContextPath()%>/' + data.result[i].avatarurl + '" alt="图片加载失败">'
                        html = html + '<div>' + data.result[i].userName + '</div>'
                        html = html + '</div>'
                    }
                    for (var i = 0; i < scale - joinNum; i++) {
                        console.log('2,'+i)
                        html = html + '<div class="groupimg">'
                        html = html + '<img src="<%=request.getContextPath()%>/images/问号.png" alt="图片加载失败">'
                        html = html + '<div>&nbsp;</div>'
                        html = html + '</div>'
                    }
                }

                var groupmembertableid = 'groupmembertable' + status
                var tb = document.getElementById(groupmembertableid)  //获取table
                var rows = tb.rows      //获取表格所有行
                rows[index].cells[2].innerHTML = html
            }
        })
    }
</script>

<script>
    var groupGoodId = null

    $('#myModal').on('show.bs.modal', function (event) {

        <%--var user = <%=session.getAttribute("user")%>--%>

        if(${sessionScope.user == null} ) {
            alert("请先登录")
            window.location.href = "/pharmacy/index/login"
        }

        //btn 触发元素，按钮
        var btn = $(event.relatedTarget)
        groupGoodId = btn.data("id")

        $.ajax({
            url:"/pharmacy/groupsponsor/selectgroupbygroupgoodid?groupGoodId=" + groupGoodId,
            dataType:"json",
            success:function (data) {
                console.log(data)
                if (data.result != ''){
                    var html = ''
                    for (var i = 0; i < data.result.length; i++) {
                        html = html + '<tr>'
                        html = html + '<td style="text-align: center;display:table-cell; vertical-align:middle"><img src="<%=request.getContextPath()%>/' + data.result[i].avatarurl + '" alt="图片加载失败" style="width: 50px;height: 50px;border-radius: 25px"></td>'
                        html = html + '<td style="text-align: center;display:table-cell; vertical-align:middle">' + data.result[i].userName + '</td>'
                        html = html + '<td style="text-align: center;display:table-cell; vertical-align:middle">还差' + data.result[i].counts + '人</td>'
                        html = html + '<td style="text-align: center;display:table-cell; vertical-align:middle" class="countdown">' + countdown(data.result[i].seconds,i) + '</td>'
                        var result = JSON.stringify(data.result[i])
                        html = html + '<td style="text-align: center;display:table-cell; vertical-align:middle"><input type="button" class="btn btn-danger" value="去拼单" onclick="showModal2(' + result.replace(/"/g,'&quot;') + ')"></td>'
                        html = html + '</tr>'
                    }
                    $("#grouplist").html(html)
                } else {
                    console.log(data.message)
                    $("#grouplist").html(' <tr>\n' +
                        '                                <td style="text-align: center;font-size: large">该商品暂时无人拼单哦，快去发起拼单吧</td>\n' +
                        '                            </tr>')
                }

            }
        })

    })
</script>

<script>
    function countdown(seconds,index) {
        // alert("seconds=" + seconds)
        var tb = document.getElementById('tab1')  //获取table
        var rows = tb.rows      //获取表格所有行

        var interval = setInterval(function () {
            seconds --;
            if (seconds > 0){
                rows[index].cells[3].innerHTML = toDays(seconds)
            } else {
                rows[index].cells[3].innerHTML = "该拼团已超时"
            }

        },1000)

        $(function () { $('#myModal').on('hidden.bs.modal', function () {
            clearInterval(interval)
        })
        });

    }
    function toDays(seconds) {
        var s = seconds % 60; // 秒
        var mi = (seconds - s) / 60 % 60; // 分钟
        var h =  ((seconds - s) / 60 - mi ) / 60 % 24; // 小时
        var d =  (((seconds- s) / 60 - mi ) / 60 - h ) / 24; // 天
        return "剩余：" + d + "天" + h + "时" + mi + "分" + s + "秒";
    }
</script>

<script>
    var groupsponsorid = null
    var groupsponsorname = null
    var counts = null
    var seeconds = null

    function showModal2(result){
        groupsponsorid = result.id
        groupsponsorname = result.userName
        counts = result.counts
        seconds = result.seconds

        $('#myModal2').modal('show')
    }

    $('#myModal2').on('show.bs.modal',function () {
        $.ajax({
            url:"/pharmacy/groupmember/selectgroupmember",
            data:"groupSponsorId=" + groupsponsorid,
            type:"post",
            dataType:"json",
            success:function (data) {
                console.log(data)
                if (data.result != ''){
                    $('#name').html(groupsponsorname)
                    $('#counts').html(counts)

                    var interval = setInterval(function () {
                        seconds --;
                        $('#seconds').html(toDays2(seconds))
                    },1000)

                    $(function () { $('#myModal2').on('hidden.bs.modal', function () {
                        $('#seconds').html('')
                        clearInterval(interval)
                    })
                    });
                    function toDays2(seconds) {
                        var s = seconds % 60; // 秒
                        var mi = (seconds - s) / 60 % 60; // 分钟
                        var h =  ((seconds - s) / 60 - mi ) / 60 % 24; // 小时
                        var d =  (((seconds- s) / 60 - mi ) / 60 - h ) / 24; // 天
                        return d + "天" + h + "时" + mi + "分" + s + "秒";
                    }

                    var imghtml = '<div class="pinzhu">拼主</div>'
                    for (var i = 0; i < data.result.length; i++) {
                        imghtml = imghtml + '<div class="groupimg">'
                        imghtml = imghtml + '<img src="<%=request.getContextPath()%>/' + data.result[i].avatarurl + '" alt="图片加载失败">'
                        imghtml = imghtml + '</div>'
                    }
                    for (var i = 0; i < counts; i++) {
                        imghtml = imghtml + '<div class="groupimg">\n' +
                            '                            <img src="<%=request.getContextPath()%>/images/问号.png" alt="图片加载失败">\n' +
                            '                        </div>'
                    }
                    $('#groupmemberavatarurl').html(imghtml)

                    var namehtml = ''
                    for (var i = 0; i < data.result.length; i++) {
                        namehtml = namehtml + '<div class="username">'
                        namehtml = namehtml + data.result[i].userName
                        namehtml = namehtml + '</div>'
                    }
                    for (var i = 0; i < counts; i++) {
                        namehtml = namehtml + '<div class="username">\n' +
                            '                        </div>'
                    }
                    $('#groupmembername').html(namehtml)

                }
            }
        })

    })

    function joinGroup(userId) {
        // alert(groupsponsorid)
        $.ajax({
            url:"/pharmacy/groupmember/joingroup",
            data:"userId=" + userId + "&groupSponsorId=" + groupsponsorid + "&groupGoodId=" + groupGoodId,
            type:"post",
            dataType:"json",
            success:function (data) {
                if (data.code == -1){
                    alert(data.message)
                } else if (data.code == 1){
                    alert(data.message)
                    $("#myModal2").modal("hide")
                    $("#myModal").modal("hide")

                    //加入成功之后进行判断是否成员已满
                    if (counts == 1){
                        $.ajax({
                            url:"/pharmacy/groupsponsor/groupsuccessandupdatestatus",
                            data:"groupSponsorId=" + groupsponsorid + "&groupGoodId=" + groupGoodId,
                            type:"post",
                            dataType:"json",
                            success:function (data) {
                                if (data.code == 1){
                                    alert("拼团成功，即将生成订单")
                                }
                                window.location.reload()
                            }

                        })
                    }
                } else {
                    alert(data.message)
                }



            }
        })
    }

</script>

<script>
    function groupSponsor(userId) {
        $.ajax({
            url:"/pharmacy/groupsponsor/creategroup",
            data:"userId=" + userId + "&groupGoodId=" + groupGoodId,
            type:"post",
            dataType:"json",
            success:function (data) {
                if (data.code == -1){
                    alert(data.message)
                } else if (data.code == 1){
                    alert(data.message)
                    $("#myModal").modal("hide")
                    $("#myModal").modal("hide")
                } else {
                    alert(data.message)
                }

            }

        })



    }
</script>
</body>
</html>
